import React, { Component } from 'react'
import { Card,Upload,Spin } from 'antd'
import axios from 'axios'

export default class Profile extends Component {
    state={
        isUploading:false,
        avatarUrl:''
    }
    handleUploadAvatar=({file})=>{
        const data=new FormData()
            data.append('Token','9cb0893e53f049d9857a87f4879afb88dc933bab:XsaKevQ6-6T_8RUu8oRnih0f9cI=:eyJkZWFkbGluZSI6MTU4MjQ1MjEyOSwiYWN0aW9uIjoiZ2V0IiwidWlkIjoiNzEwNTcxIiwiYWlkIjoiMTY2NTU3OSIsImZyb20iOiJmaWxlIn0=')
            data.append('file',file)
        this.setState({
            isUploading:true
        })
        axios.post('http://up.imgapi.com/',data)
        .then(resp=>{
            console.log(resp.data.linkurl)
            if(resp.tatus===200){
                this.setState({
                    avatarUrl:resp.data.linkurl,
                    isUploading:false
                })
            }else{

            }
        })
    }
    render() {
        return (
            <Card title="个人设置" bordered={false} >
                <Upload style={{border:'1px dashed #dedede',width:80,height:80,display:'block'}} showUploadList={false}
                customRequest={this.handleUploadAvatar}>
                    <Spin>{this.state.avatarUrl?<img style={{width:78,height:78}} src={this.state.isUploading} alt="头像"/>:<span>点击上传</span>}
                    </Spin>
                </Upload>
        
            </Card>
        )
    }
}
